<template>
	<!-- #ifdef H5	 -->
	<view class="mix-refresh-content"
		:style="{ transform: 'translateY(' + pageDeviation + 'px)', transition: pageTransition + 's', height: 'calc(100% - ' + (pageTop + statusBarHeightzhi) + 'px)', maxHeight: 'calc(100% - ' + (pageTop + statusBarHeightzhi) + 'px)' }"
		@touchstart="pageTouchstart" @touchmove="pageTouchmove" @touchend="pageTouchend">
		<!-- #endif -->
		<!-- #ifndef H5	 -->
		<view class="mix-refresh-content"
			:style="{ transform: 'translateY(' + pageDeviation + 'px)', transition: pageTransition + 's', height: 'calc(100vh - ' + (pageTop + statusBarHeightzhi) + 'px - ' + pagebottom + 'px)', maxHeight: 'calc(100vh - ' + (pageTop + statusBarHeightzhi) + 'px - ' + pagebottom + 'px)' }"
			@touchstart="pageTouchstart" @touchmove="pageTouchmove" @touchend="pageTouchend">
			<!-- #endif -->
			<view class="refresh-inner flex-center">
				<view class="wrap_zz" :style="'opacity:' + refreshing ? 1 : (jdt / 100)" v-show="!state">
					<view class="zhuan" :class="refreshing ? 'xz' : ''">
						<!--大于180，则class=clip-auto circle，否则：circle-->
						<view :class="jdt > 50 ? 'clip-auto circle' : 'circle'">
							<!--度数为：当前进度*3.6-->
							<view class="percent left" :style="'transform:rotate(' + 360 * (jdt / 100) + 'deg);'">
							</view>
							<!--大于180，则class=percent right，否则为percent right wth0-->
							<view :class="jdt > 50 ? 'percent right' : 'percent right wth0'"></view>
						</view>
					</view>
					<view class="jtt" :class="!refreshing && jdt < 90 ? 'on' : ''"></view>
				</view>
				<image src="/static/images/loading_c.png" mode="heightFix" class="loadingwang" v-show="state"
					:class="state ? 'on' : ''"></image>
				<view class="refresh-end" v-show="!refreshing && !state">
					<span>{{ refreshReady ? "松开刷新" : "下拉刷新" }}</span>
				</view>
				<view class="refresh-end" v-show="refreshing && !state">
					<span>正在刷新</span>
				</view>
				<view class="refresh-end" v-show="state">
					<span>刷新完成</span>
				</view>
			</view>
			<slot></slot>
		</view>
</template>

<script>
let startY, moveY, windowHeight = 500, platform;
let timeDiff = 0;
let touchending;
import storeMixin from '@/store/storeMixin';
export default {
    mixins: [storeMixin],

	props: {
		top: {
			//距离顶部距离，单位upx
			type: Number,
			default: 0
		}, bottom: {
			//距离底部距离，单位upx
			type: Number,
			default: 0
		}, status: {
			//运行状态
			type: Number,
			default: 0
		}, showwarm: {
			//运行状态
			type: Number,
			default: 0
		}, statusBarHeight: {
			type: Number,
			default: 0

		}


	},



	data() {
		return {
			jdt: 0,
			state: false,
			pageDeviation: 0, //下偏移量
			pageTransition: 0, //回弹过渡时间
			refreshReady: false, //进入刷新准备状态
			refreshing: false, // 进入刷新状态
			ztz: 92 / 1.1
		};
	},
	computed: {
		pageTop() {
			return uni.upx2px(this.top);
		}, pagebottom() {
			return uni.upx2px(this.bottom);
		}, statusBarHeightzhi() {
			if (this.statusBarHeight) {

				return uni.getSystemInfoSync().statusBarHeight - 6
			} else {
				return 0
			}

		}
	},
	created() {
		uni.getSystemInfo({
			success: function (e) {

				platform = e.platform;
				windowHeight = e.windowHeight;
			}
		})
	},
	watch: {
		pageDeviation: function () {

			this.jdt = this.pageDeviation * 1.1;
			if (this.jdt > 92) this.jdt = 92
		}
	},
	methods: {
		pageTouchstart(e) {
			touchending = false;
			this.pageTransition = 0;
			startY = e.touches[0].pageY;
		},
		pageTouchmove(e) {
			if (touchending) {
				return;
			}
			moveY = (e.touches[0].pageY - startY) * 0.4;
			if (moveY >= 0) {
				this.pageDeviation = moveY;

				this.$emit('setEnableScroll', false);
			}
			if (moveY >= this.ztz && this.refreshReady === false) {
				this.refreshReady = true;
			} else if (moveY < this.ztz && this.refreshReady === true) {
				this.refreshReady = false;
			}
			if (platform === 'ios' && e.touches[0].pageY > windowHeight + 10) {
				this.pageTouchend();
			}
		},
		pageTouchend() {
			touchending = true;
			if (moveY === 0) {
				return;
			}
			this.pageTransition = 0.3;
			if (moveY >= this.ztz) {
				this.startPulldownRefresh();
			} else {
				this.pageDeviation = 0;
			}

			if (this.refreshReady === true) {
				this.refreshReady = false;
			}
			//修复下拉一点回弹后页面无法滚动的bug
			this.$emit('setEnableScroll', true);
			startY = moveY = 0;
		},
		//开启下拉刷新
		startPulldownRefresh() {

			if (+new Date() - timeDiff < 100) {
				return;
			}
			timeDiff = +new Date();
			this.refreshing = true;
			this.pageDeviation = uni.upx2px(140);
			this.$emit('refresh');
			this.$emit('shuaxin', 1);
		},
		//结束下拉刷新
		endPulldownRefresh() {
			let _this = this;

			this.state = true;
			setTimeout(
				function () {
					_this.state = false;


				}
				, 900)
			setTimeout(
				function () {

					_this.refreshing = false;
					_this.pageDeviation = uni.upx2px(0);
				}
				, 600)
			this.$emit('shuaxin', 0);
			//this.$emit('setEnableScroll', true);
		},
	}
}
</script>

<style lang="scss">
.mix-refresh-content {
	display: flex;
	flex-direction: column;
	position: relative;

}

/*下拉刷新部分 */
.mix-loading-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-100%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.mix-loading-icon {
	width: 80rpx;
	height: 70rpx;
	transition: .3s;
}

.mix-loading-icon.ready {
	transform: scaleX(0.6);
}

.mix-loading-icon.active {
	animation: loading .5s ease-in infinite both alternate;
}

@keyframes loading {
	0% {
		transform: translateY(-20upx) scaleX(0.6);
	}

	100% {
		transform: translateY(4upx) scaleX(1);
	}
}

/*下拉刷新*/
.refresh-inner {
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: 50px;
	flex-direction: column;

	.refresh-loading {
		position: relative;
		padding-left: 2rem;
		height: 2rem;

		.load {
			display: flex;
			width: 1.4rem;
			height: 1.4rem;
			border: 1px solid transparent;
			border-top-color: #1FD1C2;
			border-bottom-color: #1FD1C2;
			border-radius: 50%;
			animation: spin 1.5s linear infinite;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -0.7rem;

			&::before {
				content: '';
				display: block;
				margin: auto;
				width: 0.8rem;
				height: 0.8rem;
				border: 1px solid #1FD1C2;
				border-radius: 50%;
				animation: pulse 0.6s alternate ease-in-out infinite;
			}
		}
	}

	&.flex-center {
		display: block;
		text-align: center;
	}
}

@keyframes pulse {
	from {
		transform: scale(0.5);
	}

	to {
		transform: scale(1);
	}
}

.refresh-end {
	display: block;
	font-size: 14px;
	color: #1FD1C2;
	position: relative;

	&.on {
		color: #1FD1C2;
	}
}

/* 圆环样式  */
.wrap_zz {
	width: 30px;
	height: 30px;
	position: relative;
	border-radius: 50%;
	display: block;
	transform: scale(.8) rotateY(180deg) rotate(15deg) translateY(0);
	margin: 0 auto;

	.zhuan {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -15px;

		&.xz {
			animation: spin1 0.8s linear infinite;
		}
	}

	.jtt {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -15px;
		z-index: 2;
		transform: rotate(-15deg);
		transition: all .3s;
		transform: scale(0.000000000001) rotate(-15deg);

		&.on {
			transform: scale(1) rotate(-15deg);
		}

		&::before {
			content: "";
			display: block;
			width: 8px;
			height: 8px;
			bottom: 9px;
			position: absolute;
			margin-left: -4px;
			left: 50%;
			border-bottom: 1px solid #1FD1C2;
			border-right: 1px solid #1FD1C2;
			transform: rotate(45deg);
		}

		&::after {
			content: "";
			width: 1px;
			height: 10px;
			background: #1FD1C2;
			bottom: 10px;
			position: absolute;
			display: block;
			left: 50%;
			transform: translateX(-50%) translateY(0);
		}
	}

	.circle {
		box-sizing: border-box;
		border: 1px solid transparent;
		clip: rect(0, 30px, 30px, 15px);
		position: absolute;
		width: 30px;
		height: 30px;
		border-radius: 50%;

		.percent {
			box-sizing: border-box;
			top: -1px;
			left: -1px;
			position: absolute;
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		.left {
			border: 1px solid #1FD1C2;
			clip: rect(0, 15px, 30px, 0);
		}

		.right {
			border: 1px solid #1FD1C2;
			clip: rect(0, 30px, 30px, 15px);
		}

		.wth0 {
			width: 0;
		}
	}

	.clip-auto {
		clip: rect(auto, auto, auto, auto);
	}
}

@keyframes spin1 {
	to {
		transform: rotate(-360deg);
	}
}

.loadingwang {
	width: 50rpx;
	height: 50rpx;
	display: block;
	transform: scale(.0000000000000000000000001) translateY(0);
	transition: .3s;
	margin: 0 auto 10rpx;

	&.on {
		transform: scale(1) translateY(0);
	}
}
</style>
